window.onload = function (){
    var banner = document.querySelector(".banner");
    var imgBox = document.querySelector("ul:first-of-type");
    var first = imgBox.querySelector("li:first-of-type");
    var last = imgBox.querySelector("li:last-of-type");
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);

    var lis = imgBox.querySelectorAll("li");
    var count = lis.length;
    var bannerWidth = banner.offsetWidth;
    imgBox.style.width=count*bannerWidth+"px";
    for(var i = 0; i < count; i++){
        lis[i].style.width=bannerWidth+"px";
    }
    /* 定义图片索引 从第6张开始*/
    var index = 6;
    /* 设置默认的偏移 */
    imgBox.style.left=-index*bannerWidth+"px";

    /* 当屏幕变化时，重新计算宽度 */
    window.onresize = function(){
        bannerWidth = banner.offsetWidth;
        imgBox.style.width = count * bannerWidth + "px";
        for (var i = 0; i < count; i++) {
            lis[i].style.width = bannerWidth + "px";
        }
        imgBox.style.left = -index*bannerWidth + "px";
    }

    /* 实现点标记 */
    var setIndicator = function(index){
        var indicator = banner.querySelector("ul:last-of-type").querySelectorAll("li");
        for(var i = 0; i < indicator.length; i++){
            indicator[i].classList.remove("active");
        }
        indicator[index-1].classList.add("active");
    }
    /* 设置一个全局变量 */
    var timerId;
    /* 实现自动轮播 */
    var startTime = function () {
        timerId = setInterval(function () {
            index++;
            imgBox.style.transition = "left 0.5s ease-in-out";
            imgBox.style.left = (-index * bannerWidth) + "px";
            setTimeout(function () {
                if (index == count - 1) {
                    index = 1;
                    imgBox.style.transition = "none";
                    imgBox.style.left = (-index * bannerWidth) + "px";
                }
                setIndicator(index);
            }, 500)
        }, 2000);
    };
    startTime();

    /* 实现手动轮播 */
    var startX,moveX,distanceX;
    /* 开启节流阀 */
    var isEnd = true;
    /* 触摸开始 */
    imgBox.addEventListener("touchstart",function(e){
        /* 清除定时器 */
        clearInterval(timerId);
        /* 记录起始位置 */
        startX = e.targetTouches[0].clientX;
    });
    /* 滑动过程 */
    imgBox.addEventListener("touchmove",function(e){
        if(isEnd){
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX-startX;
            imgBox.style.transition="none";
            imgBox.style.left = (-index * bannerWidth + distanceX) + "px";
        }
    });
    imgBox.addEventListener("touchend",function(e){
        isEnd = false;
        if (Math.abs(distanceX) > 100) {
            if (distanceX > 0) {
                index--;
            } else {
                index++;
            }
            imgBox.style.transition = "left 0.5s ease-in-out";
            imgBox.style.left = -index * bannerWidth + "px";
        } else if (Math.abs(distanceX) > 0) {
            imgBox.style.transition = "left 0.5s ease-in-out";
            imgBox.style.left = -index * bannerWidth + "px";
        }
        startX = 0;
        moveX = 0;
        distanceX = 0;
    });

    imgBox.addEventListener("webkitTransitionEnd", function () {
        if (index == count - 1) {
            index = 1;
            imgBox.style.transition = "none";
            imgBox.style.left = -index * bannerWidth + "px";
        } else if (index == 0) {
            index = count - 2;
            imgBox.style.transition = "none";
            imgBox.style.left = -index * bannerWidth + "px";
        }
        /*设置标记*/
        setIndicator(index);
        setTimeout(function () {
            isEnd = true;
            /*清除之前添加的定时器*/
            clearInterval(timerId);
            //重新开启定时器
             startTime();
        }, 100);
    });



}